<template>
<view class="container">
  <view class="header">
    <input placeholder="请输入商品名称" />
    <button class="search-btn">搜索</button>
    <button class="add-btn">新增</button>
  </view>
  <view class="tph">
  <view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="tp"></image></view>
    <view><image src="../../../static/images/banner/微信图片_20250518203618.png" class="tp"></image></view></view>
  <view class="product-list">
    <view class="product-item">
    
      <view class="product-ops">
 
        <button class="modify-btn">修改</button>
        <button class="off-shelf-btn">下架</button>
      </view>
    </view>
    <view class="product-item">

      <view class="product-ops">
	 <button class="modify-btn">修改</button>
        <button class="off-shelf-btn">下架</button>
      </view>
    </view>
    <view class="add-product">
      <view class="plus-sign">+</view>
    </view>
  </view>
</view>
</template>

<script>

</script>

<style>
	.tp{
		width: 275rpx;
		height: 275rpx;
		margin-top: 40rxp;
		margin-left: 40rpx;
		margin-right: 45rpx;
	}
.container {
  background-color: #f0f0f0;
  padding: 10px;
}
.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
input {
  flex: 1;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}
.search-btn,
.add-btn {
  margin-left: 10px;
  background-color: #4cd964;
  color: white;
  border: none;
  border-radius: 5px;
  height: 30px;
  width: 60px;
  font-size: 25rpx;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: 50%;
  padding: 5px;
box-sizing: border-box;
}
.product-item image {
  width: 100%;
  height: auto;
}
.product-ops {
  display: flex;
  justify-content: space-around;
  margin-top: 5px;
}
.modify-btn,
.off-shelf-btn {
  background-color: #4cd964;
  color: white;
  border: none;
  border-radius: 5px;
  height: 75rpx;
  width: 125rpx;
  font-size: 30rpx;
}
.add-product {
  width: 50%;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 300rpx;
  margin-top: 50rpx;
}
.plus-sign {
  font-size: 40px;
  color: #4cd964;
  border: 2px solid #ccc;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tph{
	display: flex;
}
</style>